<script setup lang="js">
import { onMounted } from 'vue';
import * as PIXI from 'pixi.js';

onMounted(() => {


  const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });

  document.getElementById('pixi-Background-container').appendChild(app.view);

  // Add the assets to load
  PIXI.Assets.add('flowerTop', 'https://pixijs.com/assets/flowerTop.png');
  PIXI.Assets.add('eggHead', 'https://pixijs.com/assets/eggHead.png');

  // Allow the assets to load in the background
  PIXI.Assets.backgroundLoad(['flowerTop', 'eggHead']);

  // If the background load hasn't loaded this asset yet, calling load forces this asset to load now.
  PIXI.Assets.load('eggHead').then((texture) => {
    // auxiliar flag for toggling the texture
    let isEggHead = true;

    // create a new Sprite from the resolved loaded texture
    const character = new PIXI.Sprite(texture);

    character.anchor.set(0.5);
    character.x = app.screen.width / 2;
    character.y = app.screen.height / 2;
    character.eventMode = 'static';
    character.cursor = 'pointer';

    app.stage.addChild(character);

    character.on('pointertap', async () => {
      isEggHead = !isEggHead;
      // These promise are already resolved in the cache.
      character.texture = await PIXI.Assets.load(isEggHead ? 'eggHead' : 'flowerTop');
    });
  });
})


</script>

<template>
  <div id="pixi-Background-container"></div>
</template>

<style scoped></style>
